/*
 * @Author: duguangyan dis2010@126.com
 * @Date: 2024-08-22 09:09:33
 * @LastEditors: duguangyan dis2010@126.com
 * @LastEditTime: 2024-08-22 10:39:02
 * @FilePath: \sharder\src\pages\home.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useNavigate } from "react-router-dom";
import { Image } from 'antd';

import sun from '../assets/images/sun.png'
import bub from '../assets/images/bub.png'

function Home() {
  const navigate = useNavigate();
  const imgList = [{ path:'sun',url: sun}, {path:'bub',url: bub}]
  return (
    <div style={{margin: ' 20px'}}>
      <h2 style={{ lineHeight: '100px'}}>three.js shader 展示, 点击图片查看效果</h2>
      {
        imgList.map((item, index) => {
          return (
            <img key={index} style={{width: '20%', height: '200px',cursor: 'pointer',display: 'block',margin: '0 auto', marginBottom: '20px', marginRight: '20px', float: 'left' }} alt="sun" onClick={navigate.bind(this, item.path)} src={item.url} />
          )
        })
      }
    </div>
  );
}

export default Home;